<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/common/tags.jspf" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<template:header context="${context}" title="Group - ${group.id} - Administration - Redmine"/>
	<script type="text/javascript">
		$(document).ready(function() {
			$('#logincheck').click(function() {
				$.getJSON('/mvn-web/sample-ajax/checkloginid/' + $('#loginid').val(), function(result) {
					if (result.duplicated == true) {
						alert('이미 등록된 ID입니다. ' + result.availableId + '는 사용할 수 있습니다.')
					}
					else {
						alert('사용할 수 있는 ID입니다.');
					}
				});
			});
			
			$('#grouptest').submit(function() {
				var user = $(this).serializeObject();
				$.postJSON('/mvn-web/sample-ajax/register', user, function(user) {
					alert('사용자 생성이 완료되었습니다. id: ' + user.loginid);
				});
				
				return false;
			});
			
			$('#tabs').each(function(){
				alert('a');
				
				// For each set of tabs, we want to keep track of
			    // which tab is active and it's associated content
			    var $active, $content, $links = $(this).find('a');
			    
			    // Use the first link as the initial active tab
			    $active = $links.first().addClass('selected');
			    $content = $('#' + $active.attr('id') + '-content');
			    
			    alert($content.attr('id'));
			    
			    // Hide the remaining content
			    $links.not(':first').each(function () {
			        $('#' + $(this).attr('id') + '-content').hide();
			    });

			    // Bind the click event handler
			    $(this).on('click', 'a', function(e){
			        // Make the old tab inactive.
			        $active.removeClass('selected');
			        $content.hide();

			        // Update the variables with the new link and content
			        $active = $(this);
			        $content = $('#' + $(this).attr('id') + '-content');

			        // Make the tab active.
			        $active.addClass('selected');
			        $content.show();
			        
			        $(this).blur();

			        // Prevent the anchor's default click action
			        e.preventDefault();
			    });
			});
		});	
	</script>
</head>
<body class="theme-Alternate controller-groups action-index">
	<template:content context="${context}" session="${session}" sidebar="admin" menus="${adminMenus}">
		<h2><a href="${context}/admin/groups">Groups</a> &#187; ${group.id}</h2>
		<div class="tabs">
		  <ul id="tabs">
		    <li><a href="/groups/${group.seq}/edit?tab=general" id="tab-general">General</a></li>
		    <li><a href="/groups/${group.seq}/edit?tab=users" id="tab-users">Users</a></li>
		    <li><a href="/groups/${group.seq}/edit?tab=memberships" id="tab-memberships">Projects</a></li>
		  </ul>
		  <div class="tabs-buttons" style="display:none;">
		    <button class="tab-left" onclick="moveTabLeft(this);"></button>
		    <button class="tab-right" onclick="moveTabRight(this);"></button>
		  </div>
		</div>
		
		<script>
		  Event.observe(window, 'load', function() { displayTabsButtons(); });
		  Event.observe(window, 'resize', function() { displayTabsButtons(); });
		</script>
		
		<!-- Edit general group information -->
		<div class="tab-content" id="tab-general-content">
			<ui:errors path="group.*"/>
			<form id="grouptest" action="user" method="post">
				<fieldset>
					<label>로그인 아이디: </label><input id="loginid" name="loginid" type="text" value="123"/>
					<input id="logincheck" type="button" value="아이디 중복검사" /><br/>
					<label>비밀번호 : </label><input id="password" name="password" type="password" value="456"/><br/>
					<label>이름 : </label><input id="name" name="name" type="text" value="sejoon"/><br/>
					<input type="submit" value="등록"/>
				</fieldset>
			</form>
			<form:form commandName="group" accept-charset="UTF-8" action="${context}/admin/groups/${group.seq}/edit" class="edit_group" method="post">
				<div style="margin:0;padding:0;display:inline">
					<input name="utf8" type="hidden" value="&#x2713;" />
					<input name="_method" type="hidden" value="put" />
					<input name="authenticity_token" type="hidden" value="XkUEhV8VskmwKqfN0/sLDtxdNkT3eG32bn4oOVczaqc=" />
				</div>				
				<div class="box tabular">
					<p><label for="group_lastname">Name</label><form:input path="name" size="30"/></p>
				</div>
				<input name="commit" type="submit" value="Save" />
			</form:form>
		</div>
		
		<!-- Assign/Release users to/from this group -->
		<div class="tab-content" id="tab-users-content" style="display:none">
			<div class="splitcontentleft">
				<ui:nodata/>
			</div>
		
			<div class="splitcontentright">
				<form id="groupusers" method="post" accept-charset="UTF-8" action="/" class="edit_group">
					<div style="margin:0;padding:0;display:inline">
						<input name="utf8" type="hidden" value="&#x2713;" />
						<input name="authenticity_token" type="hidden" value="XkUEhV8VskmwKqfN0/sLDtxdNkT3eG32bn4oOVczaqc=" />
					</div>
		    		<fieldset><legend>New user</legend>
			    		<p><label for="user_search">Search for user:</label><input id="user_search" name="user_search" type="text" /></p>
			    		<script type="text/javascript">
							//<![CDATA[
							new Form.Element.Observer('user_search', 0.5, function(element, value) {$("user_search").addClassName("ajax-loading"); new Ajax.Updater('users', '/groups/19/autocomplete_for_user', {asynchronous:true, evalScripts:true, method:'get', onComplete:function(request){$("user_search").removeClassName("ajax-loading")}, parameters:'q=' + encodeURIComponent(value) + '&authenticity_token=' + encodeURIComponent('XkUEhV8VskmwKqfN0/sLDtxdNkT3eG32bn4oOVczaqc=')})})
							//]]>
						</script>
					    <div id="users">
					    	<c:forEach var="user" items="${users}">
					    		<label><input id="users" name="users" type="checkbox" value="${user.seq}" /> ${user.firstName} ${user.lastName}</label><br>
					    	</c:forEach>
					    </div>
			
					    <p><input name="commit" type="submit" value="Add" /></p>
				    </fieldset>
				</form>
			</div>
		</div>
		 
		<!-- Membership -->
		<div class="tab-content" id="tab-memberships-content" style="display:none">
			<div class="splitcontentleft">
				<ui:nodata/>
			</div>
		
			<div class="splitcontentright">
				<fieldset>
					<legend>New project</legend>
					<form accept-charset="UTF-8" action="/groups/edit_membership/19" data-remote="true" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="XkUEhV8VskmwKqfN0/sLDtxdNkT3eG32bn4oOVczaqc=" /></div>
						<label class="hidden-for-sighted" for="membership_project_id">Projects</label>
						<select id="membership_project_id" name="membership[project_id]">
							<option>--- Please select ---</option>
							<option value="1">Redmine Development</option>
						</select>
						<p>Roles:
							<label><input id="membership_role_ids_" name="membership[role_ids][]" type="checkbox" value="3" /> Manager</label>
							<label><input id="membership_role_ids_" name="membership[role_ids][]" type="checkbox" value="4" /> Developer</label>
							<label><input id="membership_role_ids_" name="membership[role_ids][]" type="checkbox" value="5" /> Reporter</label>
						</p>
						<p><input name="commit" type="submit" value="Add" /></p>
					</form>
				</fieldset>
			</div>
		</div>
        <div style="clear:both;"></div>
	</template:content>
</body>
</html>

